<template>
	<view class="horoscopeLayout pageBg">
		<view :style="{height:getNavBarHeight() + 'px'}"></view>
		<view class="select">
			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			<navigator url="/pages/pairing/pairing">
				<button class="mini-btn" type="primary" size="mini" plain="true">配对星座</button>
			</navigator>
		</view>
		<view class="dateTime">
			<view v-for="date in dates" :key="date" :class="{active: selected === date}" @click="selectDate(date)">
				{{ date }}
			</view>
		</view>

		<view class="dayDate" v-if="selected === '今日'">
			<!-- 日内容 -->
			<view class="synthe">
				<view class="index">
					<text>综合指数:</text>
					<uni-rate readonly touchable :value="dayData.summary_star" size="22" />
				</view>

				<view class="index">
					<text>爱情指数:</text>
					<uni-rate readonly touchable :value="dayData.love_star" size="22" />
				</view>

				<view class="index">
					<text>财富指数:</text>
					<uni-rate readonly touchable :value="dayData.money_star" size="22" />
				</view>

				<view class="index">
					<text>工作指数:</text>
					<uni-rate readonly touchable :value="dayData.work_star" size="22" />
				</view>
			</view>

			<view class="lucky">
				<view class="gui">
					<view>贵人星座：<text>{{dayData.grxz}}</text></view>
					<view>幸运数字：<text>{{dayData.lucky_num}}</text></view>

				</view>
				<view class="ji">
					<view>吉色：<text>{{dayData.lucky_color}}</text></view>
					<view>吉利方位：<text>{{dayData. lucky_direction}}</text></view>
				</view>
				<view class="luckyDate">
					<view>吉时：<text>{{dayData.lucky_time}}</text></view>
					<view>时间：<text>{{dayData.time}}</text></view>
				</view>
			</view>

			<uni-section class="mb-10" title="今日提醒 " type="line" padding="0 10px 5px 10px">
				{{dayData. day_notice}}
			</uni-section>

			<uni-section class="mb-10" title="运势简评 " type="square" padding="0 10px 5px 10px">
				{{dayData.general_txt}}
			</uni-section>

			<uni-section class="mb-10" title="爱情运势 " type="circle" padding="0 10px 5px 10px">
				{{dayData.love_txt}}
			</uni-section>


			<uni-section class="mb-10" title="工作运势 " type="circle" padding="0 10px 5px 10px">
				{{dayData.work_txt }}
			</uni-section>

			<uni-section class="mb-10" title="财富运势 " type="circle" padding="0 10px 5px 10px">
				{{dayData.money_txt }}
			</uni-section>
		</view>

		<!-- 明天内容 -->
		<view class="dayDate" v-if="selected === '明日'">
			<view class="synthe">
				<view class="index">
					<text>综合指数:</text>
					<uni-rate readonly touchable :value="tomorrowData.summary_star" size="22" />
				</view>

				<view class="index">
					<text>爱情指数:</text>
					<uni-rate readonly touchable :value="tomorrowData.love_star" size="22" />
				</view>

				<view class="index">
					<text>财富指数:</text>
					<uni-rate readonly touchable :value="tomorrowData.money_star" size="22" />
				</view>

				<view class="index">
					<text>工作指数:</text>
					<uni-rate readonly touchable :value="tomorrowData.work_star" size="22" />
				</view>
			</view>

			<view class="lucky">
				<view class="gui">
					<view>贵人星座：<text>{{tomorrowData.grxz}}</text></view>
					<view>幸运数字：<text>{{tomorrowData.lucky_num}}</text></view>

				</view>
				<view class="ji">
					<view>吉色：<text>{{tomorrowData.lucky_color}}</text></view>
					<view>吉利方位：<text>{{tomorrowData. lucky_direction}}</text></view>
				</view>
				<view class="luckyDate">
					<view>吉时：<text>{{tomorrowData.lucky_time}}</text></view>
					<view>时间：<text>{{tomorrowData.time}}</text></view>
				</view>
			</view>

			<uni-section class="mb-10" title="今日提醒 " type="line" padding="0 10px 5px 10px">
				{{tomorrowData.day_notice}}
			</uni-section>

			<uni-section class="mb-10" title="运势简评 " type="square" padding="0 10px 5px 10px">
				{{tomorrowData.general_txt}}
			</uni-section>

			<uni-section class="mb-10" title="爱情运势 " type="circle" padding="0 10px 5px 10px">
				{{tomorrowData.love_txt}}
			</uni-section>


			<uni-section class="mb-10" title="工作运势 " type="circle" padding="0 10px 5px 10px">
				{{tomorrowData.work_txt }}
			</uni-section>

			<uni-section class="mb-10" title="财富运势 " type="circle" padding="0 10px 5px 10px">
				{{tomorrowData.money_txt }}
			</uni-section>
		</view>

		<!-- 本周内容 -->
		<view class="dayDate" v-if="selected === '本周'">
			<view class="synthe">
				<view class="index">
					<text>综合指数:</text>
					<uni-rate readonly touchable :value="weekData.summary_star" size="22" />
				</view>

				<view class="index">
					<text>爱情指数:</text>
					<uni-rate readonly touchable :value="weekData.love_star" size="22" />
				</view>

				<view class="index">
					<text>财富指数:</text>
					<uni-rate readonly touchable :value="weekData.money_star" size="22" />
				</view>

				<view class="index">
					<text>工作指数:</text>
					<uni-rate readonly touchable :value="weekData.work_star" size="22" />
				</view>
			</view>

			<view class="lucky">
				<view class="gui">
					<view>贵人星座：<text>{{weekData.grxz}}</text></view>
					<view>小人星座：<text>{{weekData.xrxz}}</text></view>
				</view>

				<view class="gui">
					<view>幸运数字：<text>{{weekData.lucky_num}}</text></view>
					<view>幸运日期：<text>{{weekData.lucky_day}}</text></view>
				</view>

				<view class="ji">
					<view>吉利颜色：<text>{{weekData.lucky_color}}</text></view>

				</view>
				<view class="luckyDate">
					<view>时间：<text>{{weekData.time}}</text></view>
				</view>
			</view>

			<uni-section class="mb-10" title="本周提醒 " type="line" padding="0 10px 5px 10px">
				{{weekData.week_notice}}
			</uni-section>

			<uni-section class="mb-10" title="运势简评 " type="square" padding="0 10px 5px 10px">
				{{weekData.general_txt}}
			</uni-section>

			<uni-section class="mb-10" title="爱情运势 " type="circle" padding="0 10px 5px 10px">
				{{weekData.love_txt}}
			</uni-section>


			<uni-section class="mb-10" title="工作运势 " type="circle" padding="0 10px 5px 10px">
				{{weekData.work_txt }}
			</uni-section>

			<uni-section class="mb-10" title="财富运势 " type="circle" padding="0 10px 5px 10px">
				{{weekData.money_txt }}
			</uni-section>

			<uni-section class="mb-10" title="健康运势 " type="circle" padding="0 10px 5px 10px">
				{{weekData.health_txt }}
			</uni-section>
		</view>

		<!-- 本月 -->
		<view class="dayDate" v-else-if="selected === '本月'">
			<view class="synthe">
				<view class="index">
					<text>综合指数:</text>
					<uni-rate readonly touchable :value="monthData.summary_star" size="22" />
				</view>

				<view class="index">
					<text>爱情指数:</text>
					<uni-rate readonly touchable :value="monthData.love_star" size="22" />
				</view>

				<view class="index">
					<text>财富指数:</text>
					<uni-rate readonly touchable :value="monthData.money_star" size="22" />
				</view>

				<view class="index">
					<text>工作指数:</text>
					<uni-rate readonly touchable :value="monthData.work_star" size="22" />
				</view>
			</view>

			<view class="lucky">
				<view class="gui">
					<view>贵人星座：<text>{{monthData.yfxz}}</text></view>
					<view>贵人星座：<text>{{monthData.grxz}}</text></view>
				</view>

				<view class="ji">
					<view>小人星座：<text>{{monthData.xrxz}}</text></view>
					<view>幸运数字：<text>{{monthData.lucky_num}}</text></view>
				</view>

				<view class="luckyDate">
					<view>吉利方位：<text>{{monthData.lucky_direction}}</text></view>
					<view>时间：<text>{{monthData.time}}</text></view>
				</view>

			</view>

			<uni-section class="mb-10" title="本月优势 " type="circle" padding="0 10px 5px 10px">
				{{monthData.month_advantage }}
			</uni-section>

			<uni-section class="mb-10" title="本月弱势 " type="circle" padding="0 10px 5px 10px">
				{{monthData.month_weakness }}
			</uni-section>


			<uni-section class="mb-10" title="运势简评 " type="square" padding="0 10px 5px 10px">
				{{monthData.general_txt}}
			</uni-section>

			<uni-section class="mb-10" title="爱情运势 " type="circle" padding="0 10px 5px 10px">
				{{monthData.love_txt}}
			</uni-section>


			<uni-section class="mb-10" title="工作运势 " type="circle" padding="0 10px 5px 10px">
				{{monthData.work_txt }}
			</uni-section>

			<uni-section class="mb-10" title="财富运势 " type="circle" padding="0 10px 5px 10px">
				{{monthData.money_txt }}
			</uni-section>
		</view>

		<!-- 年内容 -->
		<view class="yearDate" v-else-if="selected === '今年'">
			<view class="year">
				<view class="synthe">
					<view class="index">
						爱情指数:<text style="color: #ffaaff;">{{yearData.love_index}}</text>

					</view>
					<view class="index">
						财富指数:<text style="color: #ff0000;">{{yearData.money_index}}</text>

					</view>
					<view class="index">
						工作指数:<text style="color: #55ffff;">{{yearData.work_index}}</text>
					</view>
				</view>
				<view class="round">
					<view class="roundmin">
						<text class="fenshu">{{yearData.general_index}}</text>
						<text class="day">综合指数</text>
					</view>
				</view>
			</view>
			<uni-section class="mb-10" title="一句话简评" type="circle" padding="0 10px 5px 10px">
				{{yearData.oneword }}
			</uni-section>

			<uni-section class="mb-10" title="运势概述" type="circle" padding="0 10px 5px 10px">
				{{yearData.general_txt }}
			</uni-section>


			<uni-section class="mb-10" title="健康运势 " type="square" padding="0 10px 5px 10px">
				{{yearData.health_txt}}
			</uni-section>

			<uni-section class="mb-10" title="爱情运势 " type="circle" padding="0 10px 5px 10px">
				{{yearData.love_txt}}
			</uni-section>


			<uni-section class="mb-10" title="工作运势 " type="circle" padding="0 10px 5px 10px">
				{{yearData.work_txt }}
			</uni-section>

			<uni-section class="mb-10" title="财富运势 " type="circle" padding="0 10px 5px 10px">
				{{yearData.money_txt }}
			</uni-section>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getNavBarHeight
	} from '@/utils/system.js';
	import {
		getHoroscopeList
	} from "@/api/apis.js";

	const value = ref('')
	const range = ref([{
			value: 'baiyang',
			text: "白羊座"
		}, {
			value: 'jinniu',
			text: "金牛座"
		},
		{
			value: 'shuangzi',
			text: "双子座"
		},
		{
			value: 'juxie',
			text: "巨蟹座"
		},
		{
			value: 'shizi',
			text: "狮子座"
		},
		{
			value: 'chunv',
			text: "处女座"
		},
		{
			value: 'tiancheng',
			text: "天秤座"
		},
		{
			value: 'sheshou',
			text: "射手座"
		},
		{
			value: 'mojie',
			text: "摩羯座"
		},
		{
			value: 'tianxie',
			text: "天蝎座"
		},
		{
			value: 'shuiping',
			text: "水瓶座"
		},
		{
			value: 'shuangyu',
			text: "双鱼座"
		},
	])

	const queryList = ref({
		needMonth: '1',
		needYear: '1',
		needWeek: '1',
		needTomorrow: '1'
	})
	const selected = ref('今日');
	const dates = ['今日', '明日', '本周', '本月', '今年'];

	const dayData = ref({})
	const tomorrowData = ref({})
	const weekData = ref({})
	const monthData = ref({})
	const yearData = ref({})

	onLoad(() => {
		getDateTiem()
		getHoroscopeDate()
	})

	const change = async (e) => {
		value.value = e
		queryList.value.star = e
		getHoroscopeDate()
	}

	const selectDate = (date) => {
		selected.value = date;
	};

	//获取今天日期
	const getDateTiem = () => {
		const date = new Date();
		const month = date.getMonth() + 1; // 月份从 0 开始，所以需要加 1
		const day = date.getDate();
		const result = (month < 10 ? '0' : '') + month.toString() + (day < 10 ? '0' : '') + day.toString();
		queryList.value.date = result.toString()
	}


	const getHoroscopeDate = async () => {
		uni.showLoading({
			title: "加载中"
		})
		console.log(queryList.value)
		const res = await getHoroscopeList(queryList.value)
		value.value = res.showapi_res_body.star
		dayData.value = res.showapi_res_body.day
		tomorrowData.value = res.showapi_res_body.tomorrow
		weekData.value = res.showapi_res_body.week
		monthData.value = res.showapi_res_body.month
		yearData.value = res.showapi_res_body.year
		uni.hideLoading();
		console.log(res)
		console.log(value.value)
	}
</script>

<style lang="scss" scoped>
	.horoscopeLayout {
		.select {
			display: flex;
			justify-content: space-around;
			align-items: center;

		}


		.dateTime {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 30rpx;

			view {
				font-size: 40rpx;
				cursor: pointer; //停在元素上时，鼠标指针的形状
			}

			.active {
				color: red; // 可以根据需要更改选中时的颜色
			}
		}

		.dayDate {
			.synthe {
				display: flex;
				flex-direction: column; //换行

				.index {
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
			}

			.lucky {
				display: flex;
				flex-direction: column;
				padding: 30rpx;

				.gui {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10rpx;

					text {
						font-size: 40rpx;
						color: $brand-theme-color;
						margin-left: 5rpx;
					}
				}

				.ji {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10rpx;

					text {
						font-size: 40rpx;
						color: #ffa5e3;
						margin-left: 5rpx;
					}
				}

				.luckyDate {
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						font-size: 40rpx;
						color: #aaff7f;
						margin-left: 5rpx;

					}
				}
			}

		}

		.yearDate {

			.year {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.synthe {
					display: flex;
					flex-direction: column; //换行

					.index {
						display: flex;
						justify-content: space-around;
						align-items: center;
						margin-bottom: 40rpx;

						text {
							font-size: 40rpx;
						}
					}
				}

				.round {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 10rpx;
					width: 300rpx;
					height: 300rpx;
					border-radius: 50%;
					background-color: #aaaaff;

					.roundmin {
						width: 250rpx;
						height: 250rpx;
						border-radius: 50%;
						background-color: #0055ff;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column; //换行

						.fenshu {
							color: #fff;
							font-size: 60rpx;
							font-weight: bold;
						}

						.day {
							color: #fff;
							font-size: 20rpx
						}
					}

				}
			}

		}




	}
</style>